<template>
    <div class="glow-flow-btn">
        <a href="#" class="a-button glow-flow">流光按钮</a>
    </div>
</template>

<!-- 心得 -->
<!-- 1. 渐变背景和背景大小、背景定位经常一起搭配做动画。如划线动画、进度条等 -->
<!-- 2. 光晕效果的制作：伪元素 inset 负值，撑满父元素并超出父元素，然后把超出的部分模糊，就形成了光晕 -->

<style scoped lang="scss">
.glow-flow-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 300px;
    background-color: rgb(0 0 0);
    .a-button {
        box-sizing: border-box;
        width: 8rem;
        height: 3rem;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1rem;
        line-height: 3rem;
        color: #ffffff;
        text-align: center;
        text-decoration: none;
    }

    /* 光流动效果：放大渐变色背景，然后循环移动背景图 */
    .glow-flow {
        position: relative;
        z-index: 1;

        /* 细节：首尾的颜色要一样，要不然动画下一轮循环出现颜色分割线 */
        background: linear-gradient(90deg, #409eff, #67c23a, #e6a23c, #f56c6c, #409eff);
        background-size: 400%;
        border-radius: 0.5rem;
        &:hover {
            animation: bg-flow 5s linear infinite;
        }

        @keyframes bg-flow {
            0% {
                background-position: 0;
            }
            100% {
                background-position: 400%;
            }
        }

        /* 伪元素制作光晕：伪元素样式和 a 元素样式一模一样，只是范围更大，然后把超出父元素的部分模糊化形成光晕 */
        &::before {
            position: absolute;

            /* inset 负值，表示子元素向外扩展 */
            inset: -0.2rem;
            z-index: -1;
            content: "";
            background: linear-gradient(to right, #409eff, #67c23a, #e6a23c, #f56c6c, #409eff);
            background-size: 400%;
            border-radius: 0.5rem;
            opacity: 0;
        }

        /* hover 时使用模糊滤镜模糊伪元素实现发光效果 */
        &:hover::before {
            filter: blur(1rem);
            opacity: 1;
            animation: bg-flow 5s linear infinite;
        }
    }
}
</style>
